<template>
  <div class="top" style="display: flex;align-items: center;">
    <p class="left" style="width: 8px;height: 25px;background-color: #f6d39c;margin-right: 10px;border-radius: 3px;"></p>
    <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('用户银行卡') }} </p>
  </div>


  <div
    style="width: 80px;margin-top: 20px; height: 30px;border-radius:5px ; cursor: pointer;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;"
    @click="dialog = true">
    <el-icon style="font-size: 16px;margin-right: 5px;">
      <Plus />
    </el-icon>
    <span>{{ $t('添加') }} </span>
  </div>

  <div class="box2">
    <el-table :data="tableData" width="90%" style="font-size: 14px;background-color: #282d37;overflow-x: auto;"
      :header-cell-style="{ background: '#282d37', height: '30px' }" :row-class-name="rowClassName">
      <el-table-column prop="main" :label="$t('货币')" min-width="120" sortable />
      <el-table-column prop="address" :label="$t('账号')" min-width="140" sortable />
      <el-table-column prop="bank" :label="$t('银行名称')" min-width="110" sortable />
      <el-table-column prop="bankcode" :label="$t('SWIFTCODE')" min-width="120" sortable />
      <el-table-column prop="bankname" :label="$t('持卡人')" min-width="100" sortable />
      <el-table-column prop="bankaddr" :label="$t('银行地址')" min-width="120" sortable />
      <el-table-column prop="bankuseraddr" :label="$t('持卡人地址')" min-width="120" sortable />
      <el-table-column prop="id" :label="$t('操作')" min-width="200" fixed="right" sortable>
        <template #default="{ row }">
          <!-- <el-button type="text" style="color: white;">编辑</el-button>
           <el-button type="text">删除</el-button> -->
          <div class="leftbottom" style="display: flex;align-items: center;">
            <div
              style="width: 80px;height: 25px;border-radius:2px ;background-color: #f6d39c; cursor: pointer;display: flex;justify-content: center;align-items: center;margin-right: 10px;"
              @click="showUpdateDrawer(row.id)">
              <el-icon style="font-size: 10px;margin-right: 5px;color: black;">
                <Edit />
              </el-icon>
              <span style="font-size: 12px;color: black;">{{ $t('编辑') }} </span>
            </div>
            <div
              style="width: 80px;height: 25px;border-radius:2px ;background-color: #f6d39c; cursor: pointer;display: flex;justify-content: center;align-items: center;margin-right: 10px;"
              @click="del(row.id)">
              <el-icon style="font-size: 10px;margin-right: 5px;color: black;">
                <Delete />
              </el-icon>
              <span style="font-size: 12px;color: black;">{{ $t('删除') }} </span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="block" style="margin-top: 20px;">
    <el-pagination v-model:current-page="form.page" background layout="prev, pager, next" :default-page-size="15"
      @current-change="handlePageChange" />
  </div>

  <!-- 添加 谈话框 -->
  <el-dialog v-model="dialog" title="Tips" width="600px" draggable style="background-color: #272b37;">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <p style="color:white;">{{ $t('添加') }}</p>
      </div>
    </template>

    <el-form>
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('系统银行卡类型') }} ：</p>
        <el-select slot="prepend" v-model="selectedBankType" :placeholder="$t('请选择')"
          style="width: 400px;height: 30px; background-color: black; color: white; border: none;"
          @change="handleBankTypeChange">
          <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item style="display: flex;">
        <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('账号') }} ：</p>
        <el-input style="width: 400px;" v-model="form.address"></el-input>
      </el-form-item>


      <div v-if="showAccountDetails">
        <el-form-item style="display: flex;">
          <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('持卡人') }}：</p>
          <el-input style="width: 400px;" v-model="form.bankname"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;">
          <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('银行名称') }}：</p>
          <el-input style="width: 400px;" v-model="form.bank"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;">
          <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('银行地址') }}：</p>
          <el-input style="width: 400px;" v-model="form.bankaddr"></el-input>
        </el-form-item>

        <el-form-item style="display: flex;">
          <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('持卡人地址') }}：</p>
          <el-input style="width: 400px;" v-model="form.bankuseraddr"></el-input>
        </el-form-item>
        <el-form-item style="display: flex;">
          <p style="width: 130px; display: flex;color: white;justify-content: flex-end;">{{ $t('SWIFTCODE') }}：</p>
          <el-input style="width: 400px;" v-model="form.bankcode"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer" style="display: flex;justify-content: center;">
        <div
          style="width: 80px;height: 30px;border-radius:5px ;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;margin-right: 10px;"
          @click="dialog = false">
          <el-icon style="font-size: 16px;margin-right: 5px;">
            <Back />
          </el-icon>
          <span class="icon1">{{ $t('取消') }}</span>
        </div>
        <div
          style="width: 80px;height: 30px;border-radius:5px ;background-color: #f6d39c;display: flex;justify-content: center;align-items: center;"
          @click="AddBank">
          <el-icon style="font-size: 16px;margin-right: 5px;">
            <DocumentCopy />
          </el-icon>
          <span class="icon1">{{ $t('保存') }}</span>
        </div>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑 谈话框 -->
  <el-dialog v-model="dialog2" title='' width="600px" draggable style="background-color: #272b37;">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <p style="color:white;">{{ $t('编辑') }}：{{ person }}</p>
      </div>
    </template>
    <EditorUser ref="editorUserComponent" :userId="updateDrawerId" @close="closeDialog" @save="handleSave" />
  </el-dialog>
</template>

<script>
import { HomeFilled, Promotion, Pointer, Edit, Search, Plus, CloseBold, Back, DocumentCopy, Select, Delete } from "@element-plus/icons-vue";
import EditorUser from './compontents/EditorUser.vue'
import { ElMessage } from 'element-plus';
import { BankListApi, addBankApi, getWalletApi, BankdetailApi, delBankApi } from "@/api/index";
import { timePanelSharedProps } from "element-plus/es/components/time-picker/src/props/shared";
export default {
  name: 'DashBoard',
  data() {
    return {
      dialog: false,
      dialog2: false,
      isEnabled: true,
      iconType: 'CloseBold',
      form: {
        channel_id: '',
        address: '',
        bankname: '',
        bank: '',
        bankaddr: '',
        bankuseraddr: '',
        bankcode: '',
        channel_name: '',
        page: '1'
      },
      person: '',
      updateDrawerId: null,
      selectedBankType: '',
      showAccountDetails: false,
      options: [],
      pageData: [],
      tableData: [
      ],
    };
  },
  methods: {
    del(opt) {
      const token = localStorage.getItem('token');
      const id = opt
      delBankApi({
        token:token,
        id:id
      }).then(res => {
        location.reload();
      })
    },
    goToEditProfile() {
      // 使用 window.location.href 进行跳转
      this.$router.push('/editor');
    },

    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.getOrderList(); // 更新数据，重新请求后端数据
    },

    // 页码改变时
    handlePageChange() {
      this.getFeedbackList()
    },
    /* 主页面接收到组件传递的并执行 */
    handleSave() {
      this.getBankList()
      this.dialog2 = false;
    },
    closeDialog() {
      // 关闭弹窗的操作
      this.dialog2 = false; // 假设你的弹窗状态是通过dialog变量控制的
    },
    handleBankTypeChange() {
      // 获取当前选中的银行卡类型
      const selectedBank = this.options.find(item => item.id === this.selectedBankType);
      // 判断选中的银行卡类型的is_bank属性是否为1
      if (selectedBank && selectedBank.is_bank === 1) {
        // 设置一个状态来显示账号下面的div盒子
        this.showAccountDetails = true;
      } else {
        // 否则隐藏账号下面的div盒子
        this.showAccountDetails = false;
      }
    },

    /* 获取银行卡列表 */
    getBankList() {
      const token = localStorage.getItem('token');
      const params = {
        token: token,
        type: '0'
      };

      BankListApi(params).then(res => {
        console.log(res.data);
        this.tableData = res.data
        // 添加安全性检查
        if (res && Array.isArray(res.data)) {
          this.total = res.data.length;
          // 截取当前页的数据
          const startIndex = (this.form.page - 1) * this.form.pageSize;
          const endIndex = startIndex + this.form.pageSize;
          // 这里确保 res.data.data 是数组，再进行 slice 操作
          this.pagedData = res.data.slice(startIndex, endIndex);
        } else {
          console.error('Invalid data structure in the API response.');
        }
      });
    },
    /* 添加银行卡 */
    AddBank() {
      const token = localStorage.getItem('token')
      this.form.token = token
      this.form.channel_id = this.selectedBankType;
      console.log(this.form.channel_id, '银行卡的channel_id')
      addBankApi(this.form).then(res => {
        console.log(res);
        if (res.code === 1) {
          this.$message.success(res.msg)
          this.getBankList()
          this.dialog = false;
        }
        if (res.code === 0) {
          this.$message.error(res.msg)
        }
      })


    },

    /* 获取钱包类型 */
    getWallet() {
      const token = localStorage.getItem('token')
      const params = {
        token: token,
        type: '0'
      }
      getWalletApi(params).then(res => {
        this.options = res.data
      })
    },
    /* 编辑银行卡信息 */
    showUpdateDrawer(id) {
      this.dialog2 = true
      this.updateDrawerId = id;
      console.log(this.updateDrawerId, '银行卡的ID')
      const token = localStorage.getItem('token');
      const params = { token: token, id: id };
      BankdetailApi(params).then(res => {
        this.person = res.data.bankname
        if (res.code === 1) {
          this.getBankList();
        }
        console.log(this.person, '编辑持卡人')
      })
    },

    refreshPage() {
      console.log('Refreshing page data...');
      this.getBankList();
      this.getWallet();
    },
    handleSizeChange(pageSize) {
      this.form.pageSize = pageSize;
      this.getBankList(); // 更新数据，重新请求后端数据
    },
  },
  mounted() {
    this.getBankList()
    this.getWallet()
  },
  components: {
    EditorUser,
    Delete
}
}
</script>

<style lang="scss" scoped>
.icon1:hover{
  cursor: pointer
}
.box2 {
  color: white;

  :deep(.el-table thead) {
    background-color: #2d303d;
    color: white;
  }

}

.box2 {
  // height: calc(100vh - 265px);
  overflow-y: auto;

  :deep(.el-table thead) {
    color: white;
  }

  :deep(.el-table__body-wrapper tr td) {
    background-color: #2d303d;
    color: white;
  }

  :deep(.el-table td) {
    border-bottom: 3px solid black;
  }
}

:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
  cursor: pointer
}

.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //gap: 10px;

  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  /*   .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  } */

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

:deep(.el-input__wrapper) {
  background-color: black ! important;
  box-shadow: none;
}

:deep(.el-tabs__nav-wrap) {
  background-color: black !important;
}

:deep(.el-table__body-wrapper tr td) {
  background-color: #2d303d;
  color: white;
}


:deep(.el-input__wrapper) {
  background-color: black;
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-upload) {
  background-color: black !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
}



:deep(.el-input__wrapper) {
  background-color: black;
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #fff;
}



// 分页器
:deep(.el-pagination) {
  .el-pager li {
    background-color: #000;
  }
}

:deep(.el-pagination.is-background .btn-next) {
  background-color: #000;
}

:deep(.el-pagination.is-background .btn-prev) {
  background-color: #000;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #999;
}
</style>
